import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import operate from '@/views/insurance-agent/customer-product/detail/components/operate'
import type { TableRenderColumnTypes } from '@/render/TableRender'
import type { ReportCaseResultDto } from '@/api/insurance/period/types'
import type { VxeColumnSlotTypes } from 'vxe-table'
import {
    CalculateDayTypeCnEnum,
    CalculateFeeTypeCnEnum,
    DangerRuleCnEnum,
    getKeyToEnum,
    OccupationLevelCnEnum
} from '@/const/enum'
import { message, type RadioChangeEvent } from 'ant-design-vue'
import type { InsureEnsurePlanDto, InsureEnsurePlanListDto } from '@/api/insureEnsurePlan/types'
import { addFee, editFee } from '@/api/insureEnsurePlan'
import type { AddType } from '@/api/types'
import dayjs from 'dayjs'
@Component
export class AddInsurancePricePop extends Render {
    @Prop() detailData!: InsureEnsurePlanDto
    @Prop({ default: false }) show!: boolean
    @Prop({ default: 'add' }) type?: AddType
    @Prop() insureCompanyPlanId?: number

    @Emit('update:show')
    showChange(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.formConfig.show = this.show
        this.formConfig.title = this.type === 'add' ? '新增保费' : '编辑保费'
    }
    @Watch('formConfig.show', { immediate: true })
    handleWatchShowDialog() {
        this.showChange(this.formConfig.show)
    }

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '新增保费',
            width: '640px',
            theme: 'dark',
            show: false,
            labelCol: {
                style: {
                    width: '8em'
                }
            },
            items: {
                calculateFeeType: {
                    name: '保费计算',
                    element: 'radioGroup',
                    required: true,
                    options: getKeyToEnum(CalculateDayTypeCnEnum),
                    callback: {
                        change: (ev: RadioChangeEvent) => {
                            const value = ev.target.value
                            console.log(ev)
                            this.formConfig.items.calculateDayNum.hidden =
                                value !== CalculateDayTypeCnEnum.天数
                        }
                    }
                },
                calculateDayNum: {
                    name: '保费计算天数',
                    element: 'input',
                    required: true,
                    hidden: true
                },
                calculateType: {
                    name: '计费方式',
                    element: 'radioGroup',
                    required: true,
                    options: getKeyToEnum(CalculateFeeTypeCnEnum)
                },
                ensureFee: {
                    name: '保费价格',
                    element: 'customInsurancePriceTable',
                    params: {
                        tableColumnConfig: [
                            {
                                field: 'grade',
                                title: '风险等级',
                                slots: {
                                    default: ({
                                        row,
                                        column
                                    }: VxeColumnSlotTypes.ContentSlotParams) => {
                                        return <div>{OccupationLevelCnEnum[row.dangerLevel]}</div>
                                    }
                                }
                            },
                            {
                                field: 'monthFee',
                                editRender: { name: 'VxeInput' },
                                slots: {
                                    header: () => {
                                        return (
                                            <>
                                                <span>成本月保费</span>
                                                <span class="text-black-300 text-sm">(元/月)</span>
                                            </>
                                        )
                                    }
                                }
                            },
                            {
                                field: 'dailyFee',
                                editRender: { name: 'VxeInput' },
                                slots: {
                                    header: () => {
                                        return (
                                            <div class="py-10">
                                                <span>日保费</span>
                                                <span class="text-black-300 text-sm">(元/日)</span>
                                            </div>
                                        )
                                    }
                                }
                            }
                        ] as TableRenderColumnTypes<ReportCaseResultDto>,
                    }
                },
                feeStartTime: {
                    name: '生效时间',
                    element: 'datetime',
                    params: {
                        valueFormat: 'YYYY-MM-DD',
                        format: 'YYYY-MM-DD'
                    },
                    callback: {
                        change: (val: string) => {
                            this.formConfig.items.feeEndTime.value = ''
                            this.formConfig.items.feeEndTime.params.minDateTime = val
                        }
                    }
                },
                feeEndTime: {
                    name: '截止时间',
                    element: 'datetime',
                    params: {
                        valueFormat: 'YYYY-MM-DD',
                        format: 'YYYY-MM-DD',
                        minDateTime: ''
                    }
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                const params = {
                    ...data,
                    insureCompanyPlanId: this.detailData.insureCompanyPlanId || this.insureCompanyPlanId,
                    insureEnsurePlanId: this.detailData.id,
                    insureCompanyFee: data.ensureFee
                }
                if(this.type === 'edit') {
                    params.id = this.detailData.id
                    params.feeId = this.detailData.feeId
                    // 过滤时间不要时分秒
                    params.feeStartTime = dayjs(params.feeStartTime).format('YYYY-MM-DD')
                    params.feeEndTime && (params.feeEndTime = dayjs(params.feeEndTime).format('YYYY-MM-DD'))
                    await editFee(params)
                } else {
                    await addFee(params)
                }
                message.success('添加成功')
                this.handleRefresh()
                this.formConfig.show = false
            },
            init: () => {
                if (this.type === 'edit') {
                    this.formConfig.items.calculateDayNum.hidden = this.detailData.calculateFeeType !== CalculateDayTypeCnEnum.天数
                    initModelValue(this.formConfig, this.detailData)
                    // canEditAll为true都能编辑，false只能编辑结束时间
                    const list = ['calculateFeeType', 'calculateDayNum', 'calculateType', 'ensureFee', 'feeStartTime']
                    list.forEach(i => {
                        this.formConfig.items[i].readonly = !this.detailData.canEditAll
                    })
                }
            },
            cancel: () => {
                this.formConfig.show = false
            }
        } as FormModalDto
    }
    render() {
        return <>{renderModal(this.formConfig)}</>
    }
}

export default toNative<{ detailData: InsureEnsurePlanListDto | InsureEnsurePlanDto, type?: AddType, insureCompanyPlanId?: number }, { refresh: () => void }>(
    AddInsurancePricePop
)
